<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <el-card style="margin:20px; height:85vh; position:relative">
      <!-- 标签页 -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="基本信息"
          name="first"
        >基本信息</el-tab-pane>
        <el-tab-pane
          label="行驶证信息"
          name="second"
        >行驶证信息</el-tab-pane>
      </el-tabs>
      <!-- 内容渲染 -->
      <!-- 基本信息 -->
      <el-form
        v-if="labelTag === '基本信息'"
        ref="form"
        :inline="true"
        :model="trunkDetail"
        class="demo-form-inline"
        :rules="rules"
      >
        <el-form-item
          label="车辆编号"
          style="margin-right: 50px;margin-left: 100px;"
          prop="id"
        >
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.id"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="trunkDetail.id"
            placeholder="车牌编号"
            style="width: 200px;"
            disabled=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          style="margin-right: 50px;margin-left: 100px;"
          prop="licensePlate"
        >
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.licensePlate"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="trunkDetail.licensePlate"
            placeholder="车牌号码"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车型名称"
          style="margin-right: 50px;margin-left: 100px;"
          prop="truckTypeName"
        >
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.truckTypeName"
            type="text"
            class="noBorder"
          >
          <el-select
            v-if="type === 'edit'"
            v-model="trunkDetail.truckTypeName"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in carList"
              :key="index"
              :label="item.name"
              :value="item.name"
              style="width: 200px;"
              placeholder="车辆类型"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车辆体积"
          style="margin-right: 50px;margin-left: 100px; position:relative"
          prop="allowableVolume"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >立方</div>
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.allowableVolume"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="trunkDetail.allowableVolume"
            placeholder="车辆体积"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="车辆载重"
          style="margin-right: 50px;margin-left: 100px;position:relative"
          prop="allowableLoad"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >吨</div>
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.allowableLoad"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="trunkDetail.allowableLoad"
            style="width: 200px;"
            placeholder="车辆载重"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="GPSID"
          style="margin-right: 50px;margin-left: 100px;"
          prop="deviceGpsId"
        >
          <input
            v-if="type === 'view'"
            v-model="trunkDetail.deviceGpsId"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="trunkDetail.deviceGpsId"
            placeholder="GPSID"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="图片信息"
          style="margin-right: 50px;margin-left: 100px;"
        >
          <div style="display:flex"><el-image
                                      v-for="(item, index) in picture"
                                      :key="index"
                                      style="width: 212px; height: 160px; border:1px solid #ccc; margin:0 12px"
                                      :src="item"
                                      fit="fit"
                                    ></el-image>
            <el-upload
              v-if="type === 'edit'"
              action="#"
              list-type="picture-card"
              :http-request="upload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              v-if="type === 'edit'"
              :visible.sync="dialogVisible"
            >
              <img
                width="212px"
                height="160pxs"
                :src="dialogImageUrl"
                alt=""
              >

            </el-dialog>
            <div
              v-if="type === 'edit'"
              class="el-upload__tip"
            >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
            </div>
          </div>
        </el-form-item>
      </el-form>
      <!-- 行驶证信息 -->
      <el-form
        v-if="labelTag === '行驶证信息'"
        ref="form1"
        :inline="true"
        :model="licenseDetail"
        class="demo-form-inline"
        :rules="rules1"
        label-width="100px"
        label-position="right"
      >
        <el-form-item
          label="行驶证号码"
          style="margin-right: 50px;margin-left: 100px;"
          prop="transportCertificateNumber"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.transportCertificateNumber"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.transportCertificateNumber"
            placeholder="行驶证号码"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发动机号码"
          style="margin-right: 50px;margin-left: 100px;"
          prop="engineNumber"
        >
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.engineNumber"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.engineNumber"
            placeholder="发动机号码"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="注册时间"
          prop="registrationDate"
        >
          <el-date-picker
            v-model="licenseDetail.registrationDate"
            type="datetime"
            placeholder="选择日期"
            style="margin-right: 50px;"
            :disabled="type === 'view'"
            value-format="yyyy-MM-dd HHmmss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="报废日期"
          prop="mandatoryScrap"
          style="margin-right: 50px;margin-left: 100px;"
        >
          <el-date-picker
            v-model="licenseDetail.mandatoryScrap"
            type="datetime"
            placeholder="选择日期"
            style="margin-right: 50px;"
            :disabled="type === 'view'"
            value-format="yyyy-MM-dd HHmmss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="装备质量"
          style="margin-right: 50px;margin-left: 50px;position:relative"
          prop="overallQuality"
          width="90"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >吨</div>
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.overallQuality"
            type="text"
            class="noBorder"
            style="width:200px"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.overallQuality"
            placeholder="装备质量"
            style="width: 200px;"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="检验有效期"
          prop="expirationDate"
          style="margin-right: 50px;margin-left: 0px;"
        >
          <el-date-picker
            v-model="licenseDetail.expirationDate"
            type="datetime"
            value-format="yyyy-MM-dd HHmmss"
            placeholder="选择检验有效期"
            style="margin-right: 50px;"
            :disabled="type === 'view'"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="核定载质量"
          style="margin-right: 50px;margin-left: 100px;position:relative"
          prop="allowableWeight"
        >
          <div
            v-if="type === 'edit'"
            class="dw"
          >吨</div>
          <input
            v-if="type === 'view'"
            v-model="licenseDetail.allowableWeight"
            type="text"
            class="noBorder"
          >
          <el-input
            v-if="type === 'edit'"
            v-model="licenseDetail.allowableWeight"
            style="width: 200px;"
            placeholder="核定载质量"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="有效期"
          prop="validityPeriod"
          style="margin-right: 50px;margin-left: 100px;"
        >
          <el-date-picker
            v-model="licenseDetail.validityPeriod"
            type="datetime"
            placeholder="选择日期"
            style="margin-right: 50px;"
            :disabled="type === 'view'"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="图片信息"
          style="margin-right: 50px;margin-left: 100px;"
        >
          <div style="display:flex">
            <el-image
              v-for="(item, index) in picture1"
              :key="index"
              style="width: 212px; height: 160px; border:1px solid #ccc; margin:0 12px"
              :src="item"
              fit="fit"
            ></el-image>
            <el-upload
              v-if="type === 'edit'"
              action="#"
              list-type="picture-card"
              :http-request="upload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              v-if="type === 'edit'"
              :visible.sync="dialogVisible"
            >
              <img
                width="212px"
                height="160pxs"
                :src="dialogImageUrl"
                alt=""
              >

            </el-dialog>
            <div
              v-if="type === 'edit'"
              class="el-upload__tip"
            >注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张
            </div>
          </div>
        </el-form-item>

      </el-form>
      <!-- 底部按钮 -->
      <div class="btn">
        <el-button
          v-if="type === 'view'"
          type="danger"
          @click="goEdit"
        >编辑</el-button>
        <el-button
          v-if="type === 'edit'"
          @click="handleClose"
        >取消</el-button><el-button
          v-if="type === 'edit'"
          type="danger"
          @click="save"
        >保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getTrunkDetailAPI, updateTrunkDetailAPI, getLicenseDetailAPI, updateLicenseDetailAPI } from '@/api/vehicle'
import { getCarListAPI } from '@/api/carmodels'
import { uploadImgAPI } from '@/api/upload'
export default {
  data() {
    return {
      labelTag: '基本信息',
      trunkDetail: {},
      type: 'view',
      activeName: 'first',
      picture: [],
      picture1: [],
      carList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      licenseDetail: {}, // 行驶证信息
      value1: '', // 日期
      rules: {
        id: [
          { required: true, message: '请输入车辆id', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请输入应载重量', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入应载体积', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '请输入GPS设备id', trigger: 'blur' }
        ],
        dlicensePlate: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ],
        truckTypeName: [
          { required: true, message: '请输入车辆类型', trigger: 'blur' }
        ]
      },
      rules1: {
        transportCertificateNumber: [
          { required: true, message: '请输入行驶证号码', trigger: 'blur' }
        ],
        engineNumber: [
          { required: true, message: '请输入发动机号码', trigger: 'blur' }
        ],
        registrationDate: [
          { required: true, message: '请输入注册时间', trigger: 'blur' }
        ],
        mandatoryScrap: [
          { required: true, message: '请输入报废日期', trigger: 'blur' }
        ],
        overallQuality: [
          { required: true, message: '请输入装备质量', trigger: 'blur' }
        ],
        expirationDate: [
          { required: true, message: '请输入检验有效日期', trigger: 'blur' }
        ],
        allowableWeight: [
          { required: true, message: '请输入核定载质量', trigger: 'blur' }
        ],
        validityPeriod: [
          { required: true, message: '请输入核定载质量', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getTrunkDetail()
    this.getCarList()
    this.getLicenseDetail()
  },
  methods: {
    // 处理上传
    async upload(e) {
      const data = new FormData()
      const data1 = new FormData()
      if (this.labelTag === '基本信息') {
        data.append('file', e.file)
        const res = await uploadImgAPI(data)
        this.picture.push(res.data)
      }
      if (this.labelTag === '行驶证信息') {
        data1.append('file', e.file)
        const res = await uploadImgAPI(data1)
        this.picture1.push(res.data)
      }
    },
    // 保存编辑
    save() {
      if (this.labelTag === '基本信息') {
        this.$refs.form.validate(async valid => {
          if (valid) {
            this.trunkDetail.picture = this.picture.join(',')
            await updateTrunkDetailAPI(this.trunkDetail)
            this.$message.success('操作成功')
            this.getTrunkDetail()
            this.type = 'view'
          }
        })
      } else {
        this.$refs.form1.validate(async valid => {
          if (valid) {
            this.licenseDetail.picture = this.picture1.join(',')
            console.log(this.licenseDetail)
            this.licenseDetail.allowableWeight = Number(this.licenseDetail.allowableWeight)
            await updateLicenseDetailAPI({ id: this.$route.query.id, data: this.licenseDetail })
            this.$message.success('操作成功')
            this.getLicenseDetail()
            this.type = 'view'
          }
        })
      }
    },
    // 取消编辑
    handleClose() {
      this.type = 'view'
      this.getTrunkDetail()
      this.getLicenseDetail()
    },
    // 打开编辑
    goEdit() {
      this.type = 'edit'
      this.trunkDetail.allowableVolume = this.trunkDetail.allowableVolume.slice(0, this.trunkDetail.allowableVolume.length - 2)
      this.trunkDetail.allowableLoad = this.trunkDetail.allowableLoad.slice(0, this.trunkDetail.allowableLoad.length - 1)
      this.licenseDetail.overallQuality = this.licenseDetail.overallQuality.slice(0, this.licenseDetail.overallQuality.length - 1)
      this.licenseDetail.allowableWeight = this.licenseDetail.allowableWeight.slice(0, this.licenseDetail.allowableWeight.length - 1)
    },
    // 标签切换
    handleClick(tab) {
      this.labelTag = tab.label
    },
    // 获取详情
    async getTrunkDetail() {
      const res = await getTrunkDetailAPI(this.$route.query.id)
      this.trunkDetail = res.data
      if (this.type === 'view') {
        this.trunkDetail.allowableVolume = this.trunkDetail.allowableVolume + 'm³'
        this.trunkDetail.allowableLoad = this.trunkDetail.allowableLoad + '吨'
      }
      console.log(this.trunkDetail.picture)
      if (this.trunkDetail.picture) this.picture = this.trunkDetail.picture.split(',')
    },
    // 获取行驶证详情
    async getLicenseDetail() {
      const res = await getLicenseDetailAPI(this.$route.query.id)
      console.log(res)
      this.licenseDetail = res.data
      if (this.type === 'view') {
        this.licenseDetail.overallQuality = this.licenseDetail.overallQuality + '吨'
        this.licenseDetail.allowableWeight = this.licenseDetail.allowableWeight + '吨'
      }
      if (this.licenseDetail.picture) this.picture1 = this.licenseDetail.picture.split(',')
    },
    // 获取车辆列表
    async getCarList() {
      const res = await getCarListAPI()
      this.carList = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  width: 200px;
}
::v-deep .el-form-item__label {
  color: #20232A;
  font-weight: 400;
}

.el-upload__tip {
  position: absolute;
  bottom: -30px;
  color: #4E5969;
  z-index: 10;
  line-height: 14px;
  width: 800px;
}
::v-deep .el-upload--picture-card{
  width: 212px;
  height: 160px;
  position: relative;
  margin-left: 10px;
}

::v-deep .el-upload--picture-card:hover {
  border-color: #E15536;
}
.dw {
  position: absolute;
  right: 20px;
  z-index: 10;
}
.btn {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
::v-deep .el-tabs__active-bar {
  background-color: #E15536;

}
::v-deep .el-tabs__item.is-active {
  font-size: 16px;
  color: #20232A;
  line-height: 24px;
  font-weight: 600;
}

::v-deep .el-tabs__item {
  font-size: 16px;
}

::v-deep .el-tabs__item:hover {
  color: #4E5969;
}

::v-deep .el-tabs__content {
  display: none;
}

::v-deep .noBorder {
  border: 0;
  outline: 0;
  width: 200px;
  color: #818693;
}
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>

.vehicle-detail {
  ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
